Angular Material একটি শক্তিশালী এবং জনপ্রিয় UI লাইব্রেরি যা Material Design গাইডলাইন অনুসরণ করে। Angular Material এর মধ্যে বিভিন্ন কম্পোনেন্ট রয়েছে, যার মাধ্যমে আপনি রেসপন্সিভ এবং ব্যবহারকারী বান্ধব ন্যাভিগেশন তৈরি করতে পারেন। এই টিউটোরিয়ালে আমরা দেখবো কিভাবে Angular Material দিয়ে ন্যাভিগেশন বার, সাইডনেভিগেশন, এবং ট্যাবস তৈরি করা যায়।
Angular Material এর মধ্যে কিছু গুরুত্বপূর্ণ ন্যাভিগেশন কম্পোনেন্ট রয়েছে, যেমন:
এগুলোকে ব্যবহার করে আপনি একটি কার্যকরী এবং রেসপন্সিভ ন্যাভিগেশন সিস্টেম তৈরি করতে পারবেন।
MatToolbar কম্পোনেন্টটি একটি টুলবার তৈরি করতে ব্যবহৃত হয়, যা সাধারণত ন্যাভিগেশন বা অ্যাপ্লিকেশনের শিরোনাম হিসেবে কাজ করে।
<mat-toolbar color="primary">
<span>My Application</span>
<span class="spacer"></span>
<button mat-button>Home</button>
<button mat-button>About</button>
<button mat-button>Contact</button>
</mat-toolbar>
এখানে:
color="primary" দ্বারা টুলবারের রং নির্ধারণ করা হয়েছে।mat-button দ্বারা বাটন তৈরি করা হয়েছে।span.spacer ব্যবহার করে টুলবারে উপাদানগুলোর মধ্যে স্থান সৃষ্টি করা হয়েছে।.spacer {
flex: 1 1 auto;
}
MatSidenav কম্পোনেন্টটি সাইড মেনু তৈরি করতে ব্যবহৃত হয়, যা সাধারণত মোবাইল বা ডেস্কটপ অ্যাপ্লিকেশনে ব্যবহারকারীকে বিভিন্ন সেকশনে ন্যাভিগেট করতে সাহায্য করে।
<mat-sidenav-container class="example-container">
<mat-sidenav #sidenav mode="side" opened>
<mat-nav-list>
<mat-list-item>Home</mat-list-item>
<mat-list-item>About</mat-list-item>
<mat-list-item>Contact</mat-list-item>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<mat-toolbar color="primary">
<button mat-icon-button (click)="sidenav.toggle()">
<mat-icon>menu</mat-icon>
</button>
<span>My Application</span>
</mat-toolbar>
<div class="content">
<!-- Main Content Goes Here -->
</div>
</mat-sidenav-content>
</mat-sidenav-container>
এখানে:
mat-sidenav-container এবং mat-sidenav সাইড মেনু তৈরি করেছে।#sidenav একটি টেম্পলেট রেফারেন্স ভেরিয়েবল, যা সাইডনেভিগেশন কন্ট্রোল করতে ব্যবহৃত হয়।opened অ্যাট্রিবিউট দিয়ে সাইডনেভিগেশন ডিফল্টভাবে খোলা থাকবে।mat-icon-button এবং mat-icon ব্যবহার করে একটি মেনু আইকন তৈরি করা হয়েছে যা সাইডনেভিগেশন টগল করতে সাহায্য করবে।.example-container {
height: 100%;
}
mat-sidenav {
width: 250px;
}
MatMenu কম্পোনেন্টটি ড্রপডাউন মেনু তৈরি করতে ব্যবহৃত হয়, যেখানে বিভিন্ন অপশন থাকে যেগুলো ব্যবহারকারী নির্বাচন করতে পারে।
<button mat-button [matMenuTriggerFor]="menu">Open Menu</button>
<mat-menu #menu="matMenu">
<button mat-menu-item>Profile</button>
<button mat-menu-item>Settings</button>
<button mat-menu-item>Logout</button>
</mat-menu>
এখানে:
mat-button ব্যবহার করে একটি বাটন তৈরি করা হয়েছে যা মেনু ট্রিগার করবে।[matMenuTriggerFor]="menu" দ্বারা মেনু ট্রিগার করা হবে।mat-menu-item ব্যবহার করে মেনুর আইটেম তৈরি করা হয়েছে।MatTabs কম্পোনেন্টটি ট্যাবস তৈরি করতে ব্যবহৃত হয়, যেখানে প্রতিটি ট্যাবের জন্য আলাদা কনটেন্ট থাকতে পারে।
<mat-tab-group>
<mat-tab label="Tab 1">Content 1</mat-tab>
<mat-tab label="Tab 2">Content 2</mat-tab>
<mat-tab label="Tab 3">Content 3</mat-tab>
</mat-tab-group>
এখানে:
mat-tab-group এবং mat-tab দ্বারা ট্যাব গ্রুপ এবং ট্যাব আইটেম তৈরি করা হয়েছে।label অ্যাট্রিবিউট দ্বারা ট্যাবের নাম নির্ধারণ করা হয়েছে।MatBreadcrumbs কম্পোনেন্টটি ওয়েবপেজের ব্রেডক্রাম্ব (পথ নির্দেশিকা) তৈরি করতে ব্যবহৃত হয়, যা ব্যবহারকারীকে অ্যাপ্লিকেশনের বিভিন্ন স্তরের মধ্যে ন্যাভিগেট করতে সহায়তা করে।
<mat-breadcrumbs>
<mat-breadcrumbs-item>Home</mat-breadcrumbs-item>
<mat-breadcrumbs-item>Products</mat-breadcrumbs-item>
<mat-breadcrumbs-item>Product Details</mat-breadcrumbs-item>
</mat-breadcrumbs>
Angular Material এর ন্যাভিগেশন কম্পোনেন্টগুলি অ্যাঙ্গুলার অ্যাপ্লিকেশনে একটি সহজ এবং কার্যকরী ন্যাভিগেশন সিস্টেম তৈরি করতে সাহায্য করে। আপনি MatToolbar, MatSidenav, MatMenu, MatTabs, এবং MatBreadcrumbs এর মতো কম্পোনেন্ট ব্যবহার করে একটি সুন্দর এবং রেসপন্সিভ ন্যাভিগেশন ডিজাইন তৈরি করতে পারবেন। Angular Material এর ন্যাভিগেশন কম্পোনেন্টগুলোর মাধ্যমে ব্যবহারকারীরা অ্যাপ্লিকেশনের মধ্যে সহজে ন্যাভিগেট করতে পারবেন, যা অ্যাপ্লিকেশনের ব্যবহারযোগ্যতা এবং অভিজ্ঞতা বাড়াতে সাহায্য করবে।
Angular Material এ MatToolbar কম্পোনেন্ট ব্যবহার করে আপনি একটি আধুনিক এবং রেসপন্সিভ টুলবার তৈরি করতে পারেন। টুলবার সাধারণত একটি অ্যাপ্লিকেশনের শীর্ষ অংশে থাকে এবং এটি নেভিগেশন, অ্যাপ্লিকেশন তথ্য, বা অন্যান্য কন্ট্রোল উপাদান ধারণ করে।
Angular Material এর MatToolbar কম্পোনেন্ট Material Design গাইডলাইন অনুসরণ করে এবং বিভিন্ন স্ক্রীন সাইজে রেসপন্সিভ এবং কাস্টমাইজযোগ্য টুলবার তৈরি করতে সহায়তা করে।
প্রথমে MatToolbarModule আপনার অ্যাপ্লিকেশনে ইমপোর্ট করতে হবে। এটি app.module.ts ফাইলে করা হয়।
import { MatToolbarModule } from '@angular/material/toolbar';
@NgModule({
imports: [
MatToolbarModule
]
})
export class AppModule { }
এখন HTML ফাইলে mat-toolbar কম্পোনেন্ট ব্যবহার করে টুলবার তৈরি করা যায়।
<mat-toolbar color="primary">
<span>My Application</span>
</mat-toolbar>
এখানে:
mat-toolbar: এটি টুলবার কম্পোনেন্ট।color="primary": টুলবারের রঙ সেট করা হয়েছে primary (যা Angular Material থিমের অংশ)।<span>: টুলবারের মধ্যে টেক্সট বা অন্য কন্টেন্ট প্রদর্শন।Angular Material এর টুলবারে বিভিন্ন রঙ কনফিগার করা যায়, যেমন primary, accent, এবং warn রঙ, যা Material Design এর রঙ প্যালেট অনুসরণ করে।
<mat-toolbar color="accent">
<span>My Application</span>
</mat-toolbar>
এছাড়া, আপনি কাস্টম রঙও ব্যবহার করতে পারেন যদি আপনার থিম কাস্টমাইজ করা থাকে।
টুলবারে MatIcon এবং MatButton কম্পোনেন্ট যোগ করা যায়, যা টুলবারে বিভিন্ন কন্ট্রোল উপাদান যেমন বাটন, আইকন ইত্যাদি প্রদর্শন করতে ব্যবহৃত হয়।
<mat-toolbar color="primary">
<button mat-icon-button>
<mat-icon>menu</mat-icon>
</button>
<span>My Application</span>
<button mat-button>Login</button>
</mat-toolbar>
এখানে:
আপনি টুলবারে বিভিন্ন নেভিগেশন লিংকও যোগ করতে পারেন। সাধারণত RouterLink ব্যবহার করা হয় Angular রাউটিং সিস্টেমে নেভিগেশন করার জন্য।
<mat-toolbar color="primary">
<span>My Application</span>
<span class="spacer"></span>
<a mat-button routerLink="/home">Home</a>
<a mat-button routerLink="/about">About</a>
</mat-toolbar>
এখানে:
টুলবারে এলিমেন্টের অবস্থান নিয়ন্ত্রণ করতে Flexbox ব্যবহার করা হয়। mat-toolbar-row এর মধ্যে এলিমেন্টগুলো সাজানো যায় এবং spacer ক্লাস ব্যবহার করে স্পেস যুক্ত করা যায়।
<mat-toolbar color="primary">
<span>My Application</span>
<span class="spacer"></span>
<button mat-button>Login</button>
</mat-toolbar>
এখানে:
CSS:
.spacer {
flex: 1 1 auto;
}
টুলবারের উচ্চতা পরিবর্তন করতে height CSS প্রপার্টি ব্যবহার করা যায়।
<mat-toolbar color="primary" style="height: 80px;">
<span>My Application</span>
</mat-toolbar>
এখানে, টুলবারের উচ্চতা 80px করা হয়েছে।
আপনি টুলবারের স্টাইল কাস্টমাইজ করতে CSS বা SCSS ব্যবহার করতে পারেন। উদাহরণস্বরূপ, টুলবারের ব্যাকগ্রাউন্ড রঙ পরিবর্তন করতে:
mat-toolbar {
background-color: #3f51b5; /* Custom color */
}
আপনি টুলবারে অ্যানিমেশনও যোগ করতে পারেন। যেমন, স্ক্রলিং এফেক্ট বা অন্য কোনো ইন্টারঅ্যাকশন তৈরি করা:
mat-toolbar {
transition: all 0.3s ease;
}
mat-toolbar:hover {
background-color: #ff4081; /* Hover effect */
}
Angular Material এর MatToolbar কম্পোনেন্ট ব্যবহার করে আপনি একটি সুন্দর, রেসপন্সিভ এবং আধুনিক টুলবার তৈরি করতে পারেন, যা আপনার অ্যাপ্লিকেশনের জন্য নিখুঁত নেভিগেশন বা কন্ট্রোল উপাদান সরবরাহ করে। এটি স্টাইল, বাটন, আইকন, এবং নেভিগেশন লিংক ইত্যাদি একত্রিত করতে সক্ষম এবং অ্যাপ্লিকেশন এর ডিজাইন ও ইউজার ইন্টারফেসে একটি প্রফেশনাল লুক যোগ করে।
Angular Material এর Sidenav একটি জনপ্রিয় কম্পোনেন্ট যা সাইটের নেভিগেশন বা মেনু সিস্টেম তৈরি করতে ব্যবহৃত হয়। এটি একটি স্লাইডিং প্যানেল যা সাধারণত ডিভাইসের বাম অথবা ডান পাশে স্লাইড করে। Sidenav ব্যবহার করা হয় সাধারণত মোবাইল বা ডেস্কটপ অ্যাপ্লিকেশনে যেখানে ইউজারের জন্য একটি সেকেন্ডারি নেভিগেশন সিস্টেম প্রদান করা হয়।
Angular Material-এ Sidenav ব্যবহার করতে হলে, আপনাকে MatSidenavModule এবং MatListModule ইমপোর্ট করতে হবে।
প্রথমে, Angular Material ইন্সটল করতে হবে:
ng add @angular/material
এরপর, আপনার app.module.ts ফাইলে MatSidenavModule এবং MatListModule ইমপোর্ট করুন:
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatListModule } from '@angular/material/list';
@NgModule({
imports: [
MatSidenavModule,
MatListModule
],
})
export class AppModule { }
এখন, HTML ফাইলে সাইডন্যাভ ব্যবহার করতে পারেন। নিচে একটি সাধারণ উদাহরণ দেওয়া হলো:
<mat-sidenav-container class="example-container">
<mat-sidenav #sidenav mode="side" opened>
<mat-nav-list>
<mat-list-item>Home</mat-list-item>
<mat-list-item>About</mat-list-item>
<mat-list-item>Contact</mat-list-item>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<button mat-button (click)="sidenav.toggle()">Toggle Sidenav</button>
<h1>Welcome to Angular Material Sidenav Example</h1>
</mat-sidenav-content>
</mat-sidenav-container>
এখানে:
#sidenav: এটি সাইডন্যাভের একটি টেমপ্লেট রেফারেন্স।mode="side": এটি সাইডন্যাভের মুড নির্ধারণ করে (এটি সাইডে স্থায়ীভাবে প্রদর্শিত হবে)।opened: এটি সাইডন্যাভের শুরুর অবস্থায় খোলা থাকবে।Sidenav রেসপন্সিভ করার জন্য, Angular Material এর mode এবং breakpoints ব্যবহার করা যায়। আপনি চাইলে mode="over" সেট করতে পারেন, যাতে এটি মোবাইল স্ক্রীনে একটি হ্যামবার্গার মেনু হিসেবে প্রদর্শিত হয়।
<mat-sidenav-container class="example-container">
<mat-sidenav #sidenav mode="over" position="start">
<mat-nav-list>
<mat-list-item>Home</mat-list-item>
<mat-list-item>About</mat-list-item>
<mat-list-item>Contact</mat-list-item>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<button mat-button (click)="sidenav.toggle()">Toggle Sidenav</button>
<h1>Welcome to the Responsive Sidenav Example</h1>
</mat-sidenav-content>
</mat-sidenav-container>
এখানে:
আপনি সাইডন্যাভের মধ্যে অন্যান্য Angular Material উপাদানও ব্যবহার করতে পারেন, যেমন mat-list, mat-button ইত্যাদি।
<mat-sidenav-container class="example-container">
<mat-sidenav #sidenav mode="side" opened>
<mat-nav-list>
<mat-list-item><button mat-button>Dashboard</button></mat-list-item>
<mat-list-item><button mat-button>Profile</button></mat-list-item>
<mat-list-item><button mat-button>Settings</button></mat-list-item>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<button mat-button (click)="sidenav.toggle()">Toggle Sidenav</button>
<h1>Welcome to the Application</h1>
</mat-sidenav-content>
</mat-sidenav-container>
এখানে mat-button ব্যবহার করা হয়েছে সাইডন্যাভের লিস্ট আইটেমগুলোর মধ্যে।
Angular Material Sidenav হল একটি শক্তিশালী এবং রেসপন্সিভ কম্পোনেন্ট যা আপনার অ্যাপ্লিকেশনে একটি স্লাইডিং নেভিগেশন প্যানেল তৈরি করতে সাহায্য করে। এটি Mobile-first এবং Responsive Design নিশ্চিত করার জন্য উপযুক্ত, যা মোবাইল, ট্যাবলেট এবং ডেস্কটপ স্ক্রীনে সুন্দরভাবে কাজ করে। Sidenav ব্যবহার করে আপনি সহজেই নেভিগেশন সিস্টেম তৈরি করতে পারেন যা ব্যবহারকারীর অভিজ্ঞতা উন্নত করে এবং অ্যাপ্লিকেশনের ইউজার ইন্টারফেসের পরিপূর্ণতা বৃদ্ধি করে।
Angular Material এর সাহায্যে একটি রেসপন্সিভ সাইডন্যাভ (Sidenav) তৈরি করা খুবই সহজ এবং এটি একটি জনপ্রিয় উপাদান (component) যা মোবাইল, ট্যাবলেট, এবং ডেস্কটপ ডিভাইসে একটি উন্নত এবং ব্যবহারকারী-বান্ধব লেআউট প্রদান করে। সাইডন্যাভ সাধারণত নেভিগেশন বার হিসেবে ব্যবহৃত হয়, যেখানে ইউজাররা বিভিন্ন পেজ বা সেকশনে সহজে নেভিগেট করতে পারেন।
Angular Material এর MatSidenav কম্পোনেন্ট ব্যবহার করে আপনি খুব সহজেই একটি রেসপন্সিভ সাইডন্যাভ তৈরি করতে পারেন।
MatSidenavModule এবং MatButtonModule সহ কিছু অন্যান্য Angular Material মডিউল ইনপোর্ট করতে হবে।
import { NgModule } from '@angular/core';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
imports: [
BrowserAnimationsModule,
MatSidenavModule,
MatButtonModule,
MatIconModule
],
...
})
export class AppModule {}
এখন, আপনি MatSidenav কম্পোনেন্ট ব্যবহার করে সাইডন্যাভ তৈরি করতে পারবেন। একটি সাইডন্যাভ সাধারণত দুটি অংশে বিভক্ত থাকে: main content এবং sidenav (নেভিগেশন)। সাইডন্যাভ মোবাইল এবং ডেস্কটপ ডিভাইসে বিভিন্ন আকারে প্রদর্শিত হতে পারে।
<mat-sidenav-container class="example-container">
<mat-sidenav #sidenav mode="side" opened>
<mat-nav-list>
<a mat-list-item href="#">Home</a>
<a mat-list-item href="#">About</a>
<a mat-list-item href="#">Contact</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<button mat-button (click)="sidenav.toggle()">Toggle Sidenav</button>
<h1>Welcome to My Website</h1>
</mat-sidenav-content>
</mat-sidenav-container>
এখানে:
mode="side": সাইডন্যাভের স্টাইল নির্ধারণ করে। এটি side বা over হিসেবে হতে পারে। side মানে সাইডন্যাভ ডিফল্টভাবে দৃশ্যমান থাকবে, এবং over মানে এটি বাম বা ডান দিক থেকে স্লাইড হয়ে আসবে।opened: সাইডন্যাভ শুরুতে খোলা থাকবে।মোবাইল এবং ট্যাবলেট ডিভাইসে সাইডন্যাভের আচরণ পরিবর্তন করার জন্য, MatSidenav এর mode এবং opened প্রপার্টি কনফিগার করা যায়। আপনি চাইলে angular flex layout বা CSS media queries ব্যবহার করে এটি রেসপন্সিভ করতে পারেন।
<mat-sidenav-container class="example-container">
<mat-sidenav #sidenav [mode]="isHandset ? 'over' : 'side'" [opened]="!isHandset">
<mat-nav-list>
<a mat-list-item href="#">Home</a>
<a mat-list-item href="#">About</a>
<a mat-list-item href="#">Contact</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<button mat-button (click)="sidenav.toggle()">Toggle Sidenav</button>
<h1>Welcome to My Website</h1>
</mat-sidenav-content>
</mat-sidenav-container>
এখানে আমরা isHandset ব্যবহার করেছি, যা Breakpoints চেক করে মোবাইল বা ট্যাবলেট ডিভাইসে অ্যাপ্লিকেশনটি রেসপন্সিভ করে।
import { Component } from '@angular/core';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
isHandset: boolean = false;
constructor(private breakpointObserver: BreakpointObserver) {
this.breakpointObserver.observe([Breakpoints.Handset])
.subscribe(result => {
this.isHandset = result.matches;
});
}
}
এখানে:
Handset (মোবাইল) ডিভাইস চেক করতে। যখন মোবাইল ডিভাইসে থাকবে, তখন সাইডন্যাভের মোড over হবে, এবং ডেস্কটপে side হবে।CSS বা SCSS ব্যবহার করে সাইডন্যাভের আউটলুক কাস্টমাইজ করা যায়। উদাহরণস্বরূপ, সাইডন্যাভের ব্যাকগ্রাউন্ড, সাইডন্যাভের প্রস্থ এবং অন্যান্য উপাদান কাস্টমাইজ করা যেতে পারে।
.example-container {
height: 100%;
}
mat-sidenav {
width: 250px;
background: #3f51b5;
}
mat-sidenav-content {
padding: 20px;
}
এখানে, সাইডন্যাভের প্রস্থ 250px এবং ব্যাকগ্রাউন্ড কালার #3f51b5 (নীল) দেওয়া হয়েছে।
মোবাইল ভিউতে আপনি সাইডন্যাভের জন্য একটি toggle button তৈরি করতে পারেন যা সাইডন্যাভকে খোলার এবং বন্ধ করার কাজ করবে।
<mat-sidenav-container class="example-container">
<mat-sidenav #sidenav [mode]="isHandset ? 'over' : 'side'" [opened]="!isHandset">
<mat-nav-list>
<a mat-list-item href="#">Home</a>
<a mat-list-item href="#">About</a>
<a mat-list-item href="#">Contact</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<button mat-icon-button (click)="sidenav.toggle()">
<mat-icon>menu</mat-icon>
</button>
<h1>Welcome to My Website</h1>
</mat-sidenav-content>
</mat-sidenav-container>
এখানে, mat-icon-button এবং mat-icon ব্যবহার করে সাইডন্যাভের জন্য একটি মেনু আইকন তৈরি করা হয়েছে যা সাইডন্যাভ টগল করবে।
Angular Material এর মাধ্যমে একটি রেসপন্সিভ সাইডন্যাভ তৈরি করা সহজ এবং কার্যকর। Angular Material এর MatSidenav এবং BreakpointObserver ব্যবহার করে আপনি মোবাইল এবং ডেস্কটপ ডিভাইসের জন্য উপযুক্ত সাইডন্যাভ তৈরি করতে পারেন। এটি স্বয়ংক্রিয়ভাবে সাইডন্যাভের আউটলুক কাস্টমাইজ করে এবং ব্যবহারকারীর জন্য আরও সুবিধাজনক নেভিগেশন ব্যবস্থা প্রদান করে।
Angular Material এর MatToolbar এবং MatSidenav কম্পোনেন্ট দুটি জনপ্রিয় ইউআই উপাদান, যা সাধারণত ন্যাভিগেশন এবং অ্যাপ্লিকেশনের মূল কন্টেন্টকে ডিসপ্লে করার জন্য ব্যবহার করা হয়। MatToolbar হল একটি টুলবার, যা অ্যাপ্লিকেশনের শীর্ষে থাকে, এবং MatSidenav হল একটি সাইডবার, যা সাধারণত ন্যাভিগেশন মেনু হিসেবে ব্যবহৃত হয়। এই দুটি কম্পোনেন্ট একসাথে ব্যবহার করে একটি শক্তিশালী ন্যাভিগেশন সিস্টেম তৈরি করা যায়।
এখানে MatToolbar এবং MatSidenav একসাথে কিভাবে ব্যবহার করা যায়, তার একটি উদাহরণ দেওয়া হল।
app.module.ts ফাইলে প্রয়োজনীয় মডিউল ইমপোর্ট করাপ্রথমে, আপনাকে MatToolbarModule এবং MatSidenavModule ইমপোর্ট করতে হবে:
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatListModule } from '@angular/material/list';
@NgModule({
imports: [
MatToolbarModule,
MatSidenavModule,
MatListModule, // For list in sidenav
],
})
export class AppModule {}
এখানে একটি উদাহরণ দেওয়া হল যেখানে MatToolbar এবং MatSidenav একসাথে ব্যবহৃত হচ্ছে:
<mat-sidenav-container class="example-container">
<!-- Sidenav -->
<mat-sidenav #sidenav mode="side" opened>
<mat-nav-list>
<mat-list-item>Home</mat-list-item>
<mat-list-item>About</mat-list-item>
<mat-list-item>Services</mat-list-item>
<mat-list-item>Contact</mat-list-item>
</mat-nav-list>
</mat-sidenav>
<!-- Main content -->
<mat-sidenav-content>
<!-- Toolbar -->
<mat-toolbar color="primary">
<button mat-icon-button (click)="sidenav.toggle()">
<mat-icon>menu</mat-icon>
</button>
<span>My Application</span>
</mat-toolbar>
<div class="content">
<h1>Welcome to My Application</h1>
<p>This is the main content area.</p>
</div>
</mat-sidenav-content>
</mat-sidenav-container>
#sidenav এর মাধ্যমে টেমপ্লেটে রেফারেন্স করা হয়েছে, যাতে সাইডবারটি টগল করা যায়।এটি আপনার অ্যাপ্লিকেশনের লেআউটকে সুন্দরভাবে সাজানোর জন্য কিছু স্টাইল যোগ করতে পারে:
.example-container {
height: 100%;
}
mat-sidenav {
width: 250px;
}
.content {
padding: 20px;
}
আমরা সাইডন্যাভ টগল করতে (click) ইভেন্ট ব্যবহার করতে পারি। ব্যবহারকারীরা যখন মেনু বাটনে ক্লিক করবেন, তখন সাইডন্যাভটি খুলে যাবে অথবা বন্ধ হয়ে যাবে।
export class AppComponent {
// MatSidenav instance for toggle
sidenav: MatSidenav;
toggleSidenav() {
this.sidenav.toggle();
}
}
এটি আপনি MatSidenav এর টগল বাটনে click ইভেন্ট হ্যান্ডল করার জন্য ব্যবহার করতে পারেন।
MatToolbar এবং MatSidenav একসাথে ব্যবহার করার মাধ্যমে আপনি একটি শক্তিশালী এবং রেসপন্সিভ ন্যাভিগেশন সিস্টেম তৈরি করতে পারেন। টুলবারে মেনু বাটন ব্যবহার করে আপনি সহজেই সাইডন্যাভ টগল করতে পারবেন, যা আপনার অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং ইউজার-বান্ধব করে তোলে। Angular Material এর এই কম্পোনেন্টগুলো ব্যবহার করে আপনি দ্রুত একটি আধুনিক এবং কার্যকরী ন্যাভিগেশন সিস্টেম তৈরি করতে পারেন।
Angular Material এর MatMenu কম্পোনেন্ট একটি অত্যন্ত গুরুত্বপূর্ণ UI উপাদান যা মেনু তৈরি করতে ব্যবহৃত হয়। এটি ব্যবহারকারীদের বিভিন্ন অপশন বা অ্যাকশন নির্বাচন করার জন্য একটি ড্রপডাউন মেনু তৈরি করতে সাহায্য করে। মেনু কম্পোনেন্টটি একটি ইন্টারেকটিভ এবং কাস্টমাইজেবল উপাদান হিসেবে কাজ করে, যা আপনার অ্যাপ্লিকেশনে ন্যাভিগেশন বা অপশন প্রদর্শনের জন্য ব্যবহার করা হয়।
MatMenu তৈরি করতে, প্রথমে MatMenuModule ইমপোর্ট করতে হবে এবং তারপরে মেনু কম্পোনেন্ট ব্যবহার করতে হবে।
app.module.ts ফাইলে MatMenuModule ইমপোর্ট করাimport { MatMenuModule } from '@angular/material/menu';
@NgModule({
imports: [MatMenuModule],
})
export class AppModule {}
এখানে একটি সাধারণ MatMenu উদাহরণ দেওয়া হলো, যেখানে একটি বাটন ক্লিক করার মাধ্যমে মেনু প্রদর্শিত হবে।
<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
<button mat-menu-item>Option 1</button>
<button mat-menu-item>Option 2</button>
<button mat-menu-item>Option 3</button>
</mat-menu>
[matMenuTriggerFor]: এটি নির্ধারণ করে যে কোন উপাদানটি মেনু প্রদর্শনের জন্য ট্রিগার করবে।#menu="matMenu": এটি মেনুকে একটি টেমপ্লেট রেফারেন্স ভেরিয়েবল হিসেবে ঘোষণা করে, যা মেনু অপশনগুলো ধারণ করে।mat-menu-item: এটি মেনু অপশনকে স্টাইল করে এবং তাদেরকে ক্লিকযোগ্য বানায়।আপনি MatMenu এর ভিতরে সাব-মেনু যুক্ত করতে পারেন, যা আরো নেস্টেড অপশন প্রদান করে।
<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
<button mat-menu-item>Option 1</button>
<button mat-menu-item [matMenuTriggerFor]="subMenu">Option 2</button>
<button mat-menu-item>Option 3</button>
</mat-menu>
<mat-menu #subMenu="matMenu">
<button mat-menu-item>Sub-option 1</button>
<button mat-menu-item>Sub-option 2</button>
</mat-menu>
এখানে [matMenuTriggerFor]="subMenu" সাব-মেনু ট্রিগার করার জন্য ব্যবহার করা হয়েছে, যা মেনুর মধ্যে একটি সাব-মেনু তৈরি করে।
MatMenu কম্পোনেন্টে কিছু ইভেন্ট হ্যান্ডলিং রয়েছে যা আপনি ইন্টারঅ্যাকশন ট্র্যাক করতে ব্যবহার করতে পারেন। যেমন, মেনু অপশন ক্লিক করার পরে একটি ইভেন্ট ট্রিগার করতে পারেন।
<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu" (menuClosed)="onMenuClosed()">
<button mat-menu-item (click)="onOptionClick('Option 1')">Option 1</button>
<button mat-menu-item (click)="onOptionClick('Option 2')">Option 2</button>
<button mat-menu-item (click)="onOptionClick('Option 3')">Option 3</button>
</mat-menu>
export class AppComponent {
onMenuClosed() {
console.log('Menu closed');
}
onOptionClick(option: string) {
console.log(option + ' selected');
}
}
এখানে menuClosed ইভেন্ট ব্যবহার করে মেনু বন্ধ হওয়ার পরে কোনো কার্যকলাপ পরিচালনা করা হয় এবং click ইভেন্টের মাধ্যমে মেনু অপশনের উপর ক্লিক করার পর কার্যকলাপ সঞ্চালিত হয়।
আপনি MatMenu তে আইকন, টেক্সট এবং ডিভাইডার সহ আরও কাস্টমাইজেশন করতে পারেন।
<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
<button mat-menu-item><mat-icon>home</mat-icon> Home</button>
<button mat-menu-item><mat-icon>settings</mat-icon> Settings</button>
<mat-divider></mat-divider>
<button mat-menu-item><mat-icon>exit_to_app</mat-icon> Logout</button>
</mat-menu>
<mat-icon>: এটি মেনু অপশনে আইকন যুক্ত করার জন্য ব্যবহৃত হয়।<mat-divider>: এটি মেনু অপশনগুলোর মধ্যে ডিভাইডার তৈরি করে, যা ভিজ্যুয়ালভাবে অপশনগুলোকে আলাদা করে।আপনি MatMenu এর রঙ এবং স্টাইল কাস্টমাইজ করতে চাইলে CSS ব্যবহার করতে পারেন। এটি Angular Material এর থিমিং সিস্টেমের অংশ হিসেবে কাজ করে।
::ng-deep .mat-menu-panel {
background-color: #2e3b4e;
color: white;
}
::ng-deep .mat-menu-item {
font-size: 16px;
}
::ng-deep: এটি স্টাইল শীটকে Angular কম্পোনেন্টের বাইরে ট্যাগগুলোর উপর প্রয়োগ করতে ব্যবহৃত হয়।Angular Material এর MatMenu কম্পোনেন্ট একটি শক্তিশালী এবং কাস্টমাইজযোগ্য মেনু তৈরি করতে সাহায্য করে, যা অ্যাপ্লিকেশনগুলিতে ইন্টারঅ্যাকটিভ এবং কার্যকরী মেনু প্রদর্শন করতে ব্যবহৃত হয়। MatMenu এর মাধ্যমে আপনি সাব-মেনু, আইকন, ডিভাইডার এবং ক্লিক ইভেন্ট সহ মেনু অপশন কাস্টমাইজ করতে পারেন, যা আপনার অ্যাপ্লিকেশনকে আরও উন্নত এবং ব্যবহারকারী-বান্ধব করে তোলে।
Angular Material এর Material Menu কম্পোনেন্ট একটি ড্রপডাউন মেনু তৈরি করতে ব্যবহৃত হয়, যা ইউজার ইন্টারফেসে বিভিন্ন অপশন বা কমান্ড প্রদর্শন করে। এটি mat-menu ট্যাগ ব্যবহার করে তৈরি করা হয় এবং সাধারণত বিভিন্ন অ্যাকশন বা অপশন নির্বাচন করার জন্য ব্যবহার করা হয়।
Angular Material মেনু সাধারণত MatMenuModule দ্বারা নিয়ন্ত্রিত হয় এবং এটি ব্যবহারকারীকে একাধিক অপশন প্রদর্শন করতে সহায়তা করে। মেনু কম্পোনেন্টটি বেশিরভাগ সময় button, icon button, বা menu trigger দ্বারা ট্রিগার করা হয়।
প্রথমে, MatMenuModule এবং MatButtonModule ইমপোর্ট করতে হবে আপনার app.module.ts ফাইলে।
import { MatMenuModule } from '@angular/material/menu';
import { MatButtonModule } from '@angular/material/button';
@NgModule({
imports: [
MatMenuModule,
MatButtonModule
]
})
export class AppModule {}
mat-menu কম্পোনেন্টটি একটি mat-button বা mat-icon-button এর সাথে যুক্ত থাকে, যা মেনু ট্রিগার করতে ব্যবহৃত হয়।
<button mat-button [matMenuTriggerFor]="menu">Open Menu</button>
<mat-menu #menu="matMenu">
<button mat-menu-item>Option 1</button>
<button mat-menu-item>Option 2</button>
<button mat-menu-item>Option 3</button>
</mat-menu>
এখানে:
[matMenuTriggerFor]="menu": এটি বাটন বা অন্য কোনো এলিমেন্টকে মেনু টিগার করতে ব্যবহার করা হয়।<mat-menu>: এটি মেনু কনটেইনার, যেখানে আপনার অপশনগুলো থাকবে।<mat-menu-item>: এটি মেনু আইটেম বা অপশন, যা ব্যবহারকারী নির্বাচন করতে পারে।Angular Material মেনুতে আপনি আইকন এবং সাব-মেনু তৈরি করতে পারেন। একটি সাব-মেনু তৈরি করতে, মেনু আইটেমের মধ্যে একটি আরেকটি মেনু ব্যবহার করা হয়।
<button mat-button [matMenuTriggerFor]="menu">Open Menu</button>
<mat-menu #menu="matMenu">
<button mat-menu-item>Option 1</button>
<button mat-menu-item>Option 2</button>
<mat-menu #subMenu="matMenu">
<button mat-menu-item>Sub Option 1</button>
<button mat-menu-item>Sub Option 2</button>
</mat-menu>
<button mat-menu-item [matMenuTriggerFor]="subMenu">Sub Menu</button>
</mat-menu>
এখানে:
mat-menu-item এর মাধ্যমে ব্যবহারকারীর ক্লিক ইভেন্ট হ্যান্ডল করতে পারেন। এটি সাধারণত click ইভেন্টের মাধ্যমে পরিচালিত হয়।
<button mat-button [matMenuTriggerFor]="menu">Open Menu</button>
<mat-menu #menu="matMenu">
<button mat-menu-item (click)="onOptionClick('Option 1')">Option 1</button>
<button mat-menu-item (click)="onOptionClick('Option 2')">Option 2</button>
<button mat-menu-item (click)="onOptionClick('Option 3')">Option 3</button>
</mat-menu>
export class AppComponent {
onOptionClick(option: string) {
console.log(option + ' clicked!');
}
}
এখানে:
Angular Material Menu কম্পোনেন্টটির স্টাইলিং কাস্টমাইজ করা যায়। উদাহরণস্বরূপ, আপনি মেনুর ব্যাকগ্রাউন্ড রঙ বা বর্ডার পরিবর্তন করতে পারেন:
::ng-deep .mat-menu-panel {
background-color: #f0f0f0;
border-radius: 8px;
}
এখানে:
::ng-deep: এটি স্টাইল প্রোপার্টি কোডের মধ্যে encapsulation সরিয়ে দেয়, যা উপাদানটি বাইরে থেকে স্টাইল করার সুযোগ দেয়।Angular Material Menu একটি শক্তিশালী এবং কাস্টমাইজযোগ্য UI কম্পোনেন্ট যা আপনার অ্যাঙ্গুলার অ্যাপ্লিকেশনে ড্রপডাউন মেনু তৈরি করতে সহায়তা করে। এটি ব্যবহারকারীদের জন্য একটি ইন্টারঅ্যাকটিভ এবং সহজ নেভিগেশন প্রদান করে। mat-menu, mat-menu-item, এবং matMenuTriggerFor এর মাধ্যমে আপনি সহজেই বিভিন্ন অপশন এবং সাব-মেনু তৈরি করতে পারবেন। Angular Material এর মেনু কম্পোনেন্টটি স্টাইলিং এবং ইভেন্ট হ্যান্ডলিংয়ের মাধ্যমে আরও ইন্টারঅ্যাকটিভ করা যায়, যা অ্যাপ্লিকেশনটির ইউজার ইন্টারফেসে আধুনিক এবং পেশাদার লুক যোগ করে।
Angular Material এর Nested Menu একটি শক্তিশালী উপাদান, যা একটি মেনুর মধ্যে আরো একটি সাবমেনু (sub-menu) তৈরি করার সুযোগ দেয়। এটি সাধারণত একাধিক স্তরের মেনু এবং সাবমেনু প্রদর্শন করতে ব্যবহৃত হয়, যেমন একটি প্রধান মেনু এবং তার অধীনে আরো অপশনগুলোর মেনু। এটি অনেক অ্যাপ্লিকেশনে ব্যবহৃত হয়, বিশেষ করে যেখানে অনেক অপশন এবং সাব-অপশন থাকে।
এখানে Angular Material এর মাধ্যমে একটি Nested Menu তৈরি করার প্রক্রিয়া দেওয়া হলো।
প্রথমে, MatMenuModule এবং MatButtonModule আপনার অ্যাপ্লিকেশনে ইমপোর্ট করতে হবে। এগুলো হল মেনু তৈরি করার জন্য প্রয়োজনীয় কম্পোনেন্ট।
import { MatMenuModule } from '@angular/material/menu';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
@NgModule({
imports: [
MatMenuModule,
MatButtonModule,
MatIconModule
]
})
export class AppModule { }
এখন আমরা mat-menu কম্পোনেন্ট ব্যবহার করে একটি Nested Menu তৈরি করবো। নীচের কোডে, একটি প্রধান মেনু তৈরি করা হয়েছে, এবং এর মধ্যে কিছু সাবমেনু রয়েছে:
<button mat-button [matMenuTriggerFor]="menu">Main Menu</button>
<mat-menu #menu="matMenu">
<button mat-menu-item [matMenuTriggerFor]="subMenu1">Option 1</button>
<button mat-menu-item [matMenuTriggerFor]="subMenu2">Option 2</button>
<button mat-menu-item>Option 3</button>
</mat-menu>
<mat-menu #subMenu1="matMenu">
<button mat-menu-item>Sub Option 1.1</button>
<button mat-menu-item>Sub Option 1.2</button>
<button mat-menu-item>Sub Option 1.3</button>
</mat-menu>
<mat-menu #subMenu2="matMenu">
<button mat-menu-item>Sub Option 2.1</button>
<button mat-menu-item>Sub Option 2.2</button>
</mat-menu>
এখানে:
mat-menu: মূল মেনু এবং সাবমেনুর জন্য ব্যবহার করা হচ্ছে।[matMenuTriggerFor]: এই ডিরেকটিভটি মেনু ট্রিগার করতে ব্যবহৃত হয়, অর্থাৎ কোন বাটনের জন্য মেনু প্রদর্শিত হবে তা নির্ধারণ করে।#menu, #subMenu1, #subMenu2: মেনু উপাদানগুলির জন্য রেফারেন্স তৈরি করা হচ্ছে।Angular Material ডিফল্ট স্টাইলিং সরবরাহ করে, তবে আপনি চাইলে Nested Menu এর জন্য কাস্টম CSS স্টাইলও অ্যাড করতে পারেন। যেমন, সাবমেনুতে কিছু অতিরিক্ত স্পেস বা আলাদা রং দেয়া।
mat-menu {
min-width: 200px;
}
mat-menu button {
padding: 8px;
}
mat-menu .mat-menu-item {
font-size: 14px;
}
mat-menu .mat-menu-panel {
background-color: #f9f9f9;
}
এই CSS কোডে আমরা মেনুর মিনিমাম প্রস্থ, বাটনের প্যাডিং, ফন্ট সাইজ, এবং ব্যাকগ্রাউন্ড রং কাস্টমাইজ করেছি।
Angular Material এর MatIconModule ব্যবহার করে আপনি মেনুতে আইকনও যুক্ত করতে পারেন। এটি আরও ইন্টারঅ্যাকটিভ এবং ব্যবহারকারী বান্ধব করে তোলে।
<mat-menu #menu="matMenu">
<button mat-menu-item [matMenuTriggerFor]="subMenu1">
<mat-icon>home</mat-icon> Option 1
</button>
<button mat-menu-item [matMenuTriggerFor]="subMenu2">
<mat-icon>settings</mat-icon> Option 2
</button>
<button mat-menu-item>
<mat-icon>help</mat-icon> Option 3
</button>
</mat-menu>
এখানে আমরা mat-icon ট্যাগ ব্যবহার করেছি, যা প্রতিটি মেনু আইটেমের জন্য আইকন প্রদর্শন করে।
আপনি Angular Material এর mat-menu কম্পোনেন্টের মাধ্যমে মেনুর আচরণও কাস্টমাইজ করতে পারেন। যেমন, মেনুর অবস্থান, অ্যানিমেশন ইফেক্ট, অথবা মেনু ওপেন এবং ক্লোজ করার সময় ইভেন্ট হ্যান্ডলিং করা।
<mat-menu #menu="matMenu" xPosition="before" yPosition="below">
<button mat-menu-item [matMenuTriggerFor]="subMenu1">Option 1</button>
</mat-menu>
এখানে xPosition="before" এবং yPosition="below" দিয়ে মেনুর পজিশন নির্ধারণ করা হয়েছে।
openMenu() {
this.menu.open();
}
closeMenu() {
this.menu.close();
}
এখানে আমরা মেনু ওপেন এবং ক্লোজ করার জন্য একটি ফাংশন তৈরি করেছি।
Angular Material Nested Menu একটি অত্যন্ত কার্যকরী কম্পোনেন্ট যা ব্যবহারকারীদের জন্য একাধিক স্তরের মেনু এবং সাবমেনু তৈরি করতে সহায়ক। এটি mat-menu এবং mat-menu-item এর মাধ্যমে খুব সহজেই ইমপ্লিমেন্ট করা যায় এবং একাধিক স্তরের মেনু তৈরি করতে [matMenuTriggerFor] ব্যবহার করা হয়। Angular Material এর সাহায্যে আপনি মেনুর স্টাইলিং, আচরণ এবং অন্যান্য উপাদান কাস্টমাইজ করতে পারবেন, যা আপনার অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং ইউজার-বান্ধব করে তোলে।
Angular Material এর <mat-tab-group> এবং <mat-tab> কম্পোনেন্ট ব্যবহার করে আপনি সহজেই সুন্দর এবং কার্যকরী ট্যাব তৈরি করতে পারেন। ট্যাবস একটি জনপ্রিয় UI উপাদান, যা আপনার অ্যাপ্লিকেশনের ভিউ বা কনটেন্টকে বিভিন্ন বিভাগে ভাগ করতে সাহায্য করে। Angular Material-এর ট্যাব কম্পোনেন্ট Material Design এর গাইডলাইন অনুসরণ করে এবং বিভিন্ন কাস্টমাইজেশন অপশন সরবরাহ করে।
প্রথমে MatTabsModule মডিউলটি app.module.ts ফাইলে ইমপোর্ট করতে হবে।
import { MatTabsModule } from '@angular/material/tabs';
@NgModule({
imports: [MatTabsModule],
})
export class AppModule { }
Angular Material এ ট্যাব তৈরি করতে <mat-tab-group> এবং <mat-tab> ব্যবহার করা হয়। এখানে, <mat-tab-group> হল মূল কন্টেইনার এবং <mat-tab> ট্যাবের প্রতিটি ভিউ বা কনটেন্ট।
<mat-tab-group>
<mat-tab label="Tab 1">Content 1</mat-tab>
<mat-tab label="Tab 2">Content 2</mat-tab>
<mat-tab label="Tab 3">Content 3</mat-tab>
</mat-tab-group>
এখানে:
<mat-tab-group> ট্যাবগুলোকে একটি গ্রুপে যুক্ত করবে।<mat-tab label="Tab 1"> প্রতিটি ট্যাবের লেবেল এবং কনটেন্ট থাকবে।আপনি চাইলে ট্যাবের কন্টেন্ট ডাইনামিকভাবে নিয়ন্ত্রণ করতে পারেন। Angular এর ngFor ডিরেকটিভ ব্যবহার করে আপনি ট্যাবের কন্টেন্টকে সহজে ডাইনামিকভাবে তৈরি করতে পারেন।
<mat-tab-group>
<mat-tab *ngFor="let tab of tabs" [label]="tab.label">{{ tab.content }}</mat-tab>
</mat-tab-group>
TypeScript ফাইলে:
export class AppComponent {
tabs = [
{ label: 'Tab 1', content: 'Content for Tab 1' },
{ label: 'Tab 2', content: 'Content for Tab 2' },
{ label: 'Tab 3', content: 'Content for Tab 3' }
];
}
এখানে, tabs অ্যারে থেকে ngFor দিয়ে প্রতিটি ট্যাব ডাইনামিকভাবে তৈরি করা হচ্ছে।
আপনি selectedIndex এর মাধ্যমে ট্যাবের সিলেকশন মান নিয়ন্ত্রণ করতে পারেন।
<mat-tab-group [(selectedIndex)]="selectedIndex">
<mat-tab label="Tab 1">Content 1</mat-tab>
<mat-tab label="Tab 2">Content 2</mat-tab>
<mat-tab label="Tab 3">Content 3</mat-tab>
</mat-tab-group>
<p>Selected Tab Index: {{ selectedIndex }}</p>
TypeScript ফাইলে:
export class AppComponent {
selectedIndex: number = 0; // ডিফল্টভাবে প্রথম ট্যাব সিলেক্ট করা
}
এখানে, selectedIndex দিয়ে আপনি কোন ট্যাব সিলেক্ট আছে তা ট্র্যাক করতে পারবেন এবং পরিবর্তন করতে পারবেন।
Angular Material আপনাকে ট্যাব ইন্ডিকেটর কাস্টমাইজ করার জন্য বিভিন্ন অপশন সরবরাহ করে। আপনি ট্যাব ইন্ডিকেটরের রঙ বা স্টাইল কাস্টমাইজ করতে পারেন।
.mat-tab-label {
color: blue; /* ট্যাব লেবেলের রঙ পরিবর্তন */
}
.mat-tab-label-active {
color: red; /* সিলেক্টেড ট্যাবের লেবেলের রঙ পরিবর্তন */
}
এটি ট্যাবের লেবেলগুলির স্টাইল পরিবর্তন করবে।
Angular Material ট্যাবে আপনি ছবি বা অন্যান্য উপাদানও যোগ করতে পারেন। নিচে একটি উদাহরণ দেওয়া হলো যেখানে একটি ট্যাবে ইমেজ যুক্ত করা হয়েছে:
<mat-tab-group>
<mat-tab label="Tab 1">
<img src="https://via.placeholder.com/150" alt="Tab 1 Image">
Content 1
</mat-tab>
<mat-tab label="Tab 2">Content 2</mat-tab>
</mat-tab-group>
এখানে, <img> ট্যাব কন্টেন্টের মধ্যে একটি চিত্র যুক্ত করা হয়েছে।
কখনও কখনও, আপনি ট্যাবের দৃশ্য বা ভিউ নিয়ন্ত্রণ করতে চান (যেমন, শুধুমাত্র কিছু ট্যাব দৃশ্যমান থাকবে)। এটি ngIf বা [hidden] ডিরেকটিভের মাধ্যমে করা যেতে পারে।
<mat-tab-group>
<mat-tab *ngIf="showTab1" label="Tab 1">Content 1</mat-tab>
<mat-tab *ngIf="showTab2" label="Tab 2">Content 2</mat-tab>
<mat-tab label="Tab 3">Content 3</mat-tab>
</mat-tab-group>
TypeScript ফাইলে:
export class AppComponent {
showTab1 = true;
showTab2 = false;
}
এখানে, আপনি showTab1 এবং showTab2 এর মান পরিবর্তন করে ট্যাবগুলো প্রদর্শন বা লুকাতে পারবেন।
Angular Material ট্যাব কম্পোনেন্ট অ্যাঙ্গুলার অ্যাপ্লিকেশনের জন্য একটি শক্তিশালী এবং কাস্টমাইজযোগ্য UI উপাদান। এটি সহজেই বিভিন্ন ট্যাব তৈরি করতে সহায়তা করে এবং ব্যবহারকারীদের মধ্যে কনটেন্ট ভাগ করতে ব্যবহৃত হয়। ট্যাবস ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশনের ডিজাইন এবং কনটেন্ট সুশৃঙ্খলভাবে উপস্থাপন করতে পারেন। Angular Material এর ট্যাব কম্পোনেন্টের মাধ্যমে আপনি ডাইনামিক ট্যাব তৈরি, ট্যাব সিলেকশন নিয়ন্ত্রণ, কাস্টম স্টাইলিং এবং ইন্টারঅ্যাকটিভ UI তৈরি করতে পারেন।
Angular Material-এর <mat-tab-group> এবং <mat-tab> কম্পোনেন্ট ব্যবহার করে আপনি খুব সহজেই ট্যাবড ন্যাভিগেশন তৈরি করতে পারেন। এটি অ্যাঙ্গুলার অ্যাপ্লিকেশনের জন্য একটি সুন্দর, আধুনিক, এবং ব্যবহারকারী-বান্ধব নেভিগেশন তৈরি করার একটি জনপ্রিয় উপায়।
ট্যাবড ন্যাভিগেশন ব্যবহারকারীদের একাধিক ভিউ বা কনটেন্টের মধ্যে সুইচ করার সুযোগ দেয়, যা অ্যাপ্লিকেশনটির অভ্যন্তরীণ নেভিগেশনকে আরও সহজ ও কার্যকরী করে তোলে।
প্রথমে, Angular Material-এর MatTabsModule ইমপোর্ট করতে হবে। এটি app.module.ts ফাইলে করতে হবে।
import { MatTabsModule } from '@angular/material/tabs';
@NgModule({
imports: [
MatTabsModule
]
})
export class AppModule { }
এখন <mat-tab-group> এবং <mat-tab> কম্পোনেন্ট ব্যবহার করে ট্যাবগুলো তৈরি করা যাবে। এখানে প্রতিটি <mat-tab> একটি ট্যাব, এবং <mat-tab-group> কম্পোনেন্টটি তাদেরকে গ্রুপ করে রাখে।
<mat-tab-group>
<mat-tab label="Tab 1">Content 1</mat-tab>
<mat-tab label="Tab 2">Content 2</mat-tab>
<mat-tab label="Tab 3">Content 3</mat-tab>
</mat-tab-group>
এখানে, label অ্যাট্রিবিউটটি ট্যাবের ট্যাগ নাম (যেমন, "Tab 1", "Tab 2") নির্ধারণ করে এবং প্রতিটি ট্যাবের কন্টেন্টের মধ্যে যেকোনো HTML কন্টেন্ট রাখতে পারেন।
আপনি চাইলে selectedIndex প্রপার্টি ব্যবহার করে সিলেক্ট করা ট্যাব ট্র্যাক করতে পারেন। যেমন, আপনি যদি চান যে ডিফল্টভাবে দ্বিতীয় ট্যাব সিলেক্ট হয়ে থাকুক, তাহলে selectedIndex ব্যবহার করতে হবে।
<mat-tab-group [selectedIndex]="selectedTabIndex">
<mat-tab label="Tab 1">Content 1</mat-tab>
<mat-tab label="Tab 2">Content 2</mat-tab>
<mat-tab label="Tab 3">Content 3</mat-tab>
</mat-tab-group>
টাইপস্ক্রিপ্ট:
export class AppComponent {
selectedTabIndex: number = 1; // ডিফল্টভাবে দ্বিতীয় ট্যাব সিলেক্ট
}
এখানে, selectedTabIndex এর মান পরিবর্তন করে আপনি যেকোনো ট্যাবকে ডিফল্টভাবে সিলেক্ট করতে পারেন।
আপনি যেকোনো ট্যাবের কন্টেন্টের মধ্যে ডাইনামিক কন্টেন্ট রাখতে পারেন, যেমন ফর্ম, লিস্ট, অথবা অন্যান্য কম্পোনেন্ট।
<mat-tab-group>
<mat-tab label="User Info">
<app-user-info></app-user-info>
</mat-tab>
<mat-tab label="Settings">
<app-settings></app-settings>
</mat-tab>
<mat-tab label="History">
<app-history></app-history>
</mat-tab>
</mat-tab-group>
এখানে, app-user-info, app-settings, এবং app-history নামক কাস্টম কম্পোনেন্টগুলো ট্যাব কন্টেন্ট হিসেবে ব্যবহার করা হয়েছে।
আপনি ট্যাব সিলেকশন পরিবর্তন করার সময় কোনো অ্যাকশন ট্রিগার করতে চাইলে selectedTabChange ইভেন্ট ব্যবহার করতে পারেন।
<mat-tab-group (selectedTabChange)="onTabChange($event)">
<mat-tab label="Tab 1">Content 1</mat-tab>
<mat-tab label="Tab 2">Content 2</mat-tab>
<mat-tab label="Tab 3">Content 3</mat-tab>
</mat-tab-group>
টাইপস্ক্রিপ্ট:
export class AppComponent {
onTabChange(event: any) {
console.log('Tab changed to index: ', event.index);
}
}
এখানে, selectedTabChange ইভেন্টের মাধ্যমে আপনি সিলেক্ট করা ট্যাবের ইনডেক্স ট্র্যাক করতে পারবেন এবং এর উপর ভিত্তি করে কোনো কার্যক্রম গ্রহণ করতে পারবেন।
আপনি ট্যাবের স্টাইল কাস্টমাইজ করতে CSS ব্যবহার করতে পারেন। উদাহরণস্বরূপ, ট্যাবের ব্যাকগ্রাউন্ড রঙ পরিবর্তন করা:
mat-tab-group {
background-color: #f0f0f0;
}
mat-tab {
color: #3f51b5;
}
mat-tab-label {
font-weight: bold;
}
আপনি যদি ট্যাবগুলোর সংখ্যা ডাইনামিকভাবে পরিবর্তন করতে চান, তাহলে ট্যাবগুলো একটি লিস্টের মাধ্যমে রেন্ডার করতে পারেন। এখানে একটি উদাহরণ:
<mat-tab-group>
<mat-tab *ngFor="let tab of tabs" [label]="tab.label">
{{ tab.content }}
</mat-tab>
</mat-tab-group>
টাইপস্ক্রিপ্ট:
export class AppComponent {
tabs = [
{ label: 'Tab 1', content: 'Content for Tab 1' },
{ label: 'Tab 2', content: 'Content for Tab 2' },
{ label: 'Tab 3', content: 'Content for Tab 3' }
];
}
এখানে, *ngFor ডিরেকটিভ ব্যবহার করে একটি লিস্টের মাধ্যমে ট্যাবগুলো ডাইনামিকভাবে রেন্ডার করা হয়েছে।
Angular Material এর ট্যাবড ন্যাভিগেশন একটি অত্যন্ত কার্যকরী উপায় যা অ্যাপ্লিকেশনের মধ্যে একাধিক পৃষ্ঠা বা ভিউ সুইচ করতে সহায়তা করে। এটি ব্যবহারকারীকে একটি সুষ্ঠু ও ইন্টারেক্টিভ নেভিগেশন অভিজ্ঞতা প্রদান করে। MatTabGroup এবং MatTab কম্পোনেন্ট ব্যবহার করে আপনি সহজেই ট্যাবড নেভিগেশন তৈরি করতে পারেন এবং বিভিন্ন কাস্টমাইজেশন যেমন স্টাইলিং, ডাইনামিক কন্টেন্ট, ট্যাব সিলেকশন ট্র্যাকিং ইত্যাদি করতে পারেন।
Angular Material এর MatTab কম্পোনেন্ট ব্যবহার করে আপনি সহজেই ট্যাব তৈরি করতে পারেন। ডাইনামিক ট্যাব তৈরি করতে Angular-এর ngFor ডিরেকটিভ ব্যবহার করতে হয়, যা আপনাকে একাধিক ট্যাবকে প্রোগ্রামেটিক্যালি তৈরি করতে সক্ষম করে। এটি সাধারণত তখন ব্যবহৃত হয় যখন ট্যাবগুলো ডাটাবেস বা API থেকে লোড হয় এবং ব্যবহারকারীর ইন্টারঅ্যাকশনের উপর ভিত্তি করে ট্যাব কন্টেন্ট পরিবর্তিত হয়।
প্রথমে Angular Material ইন্সটল করুন (যদি আগে থেকে ইন্সটল না থাকে):
ng add @angular/material
এখানে, MatTabsModule এবং MatIconModule ইমপোর্ট করা হবে ট্যাবস এবং আইকন ব্যবহার করতে।
MatTabsModule এবং MatIconModule ইমপোর্ট করুন:
import { MatTabsModule } from '@angular/material/tabs';
import { MatIconModule } from '@angular/material/icon';
@NgModule({
imports: [
MatTabsModule,
MatIconModule
]
})
export class AppModule {}
এখন, ngFor ডিরেকটিভ ব্যবহার করে ডাইনামিক ট্যাব তৈরি করা যায়। নিচে একটি উদাহরণ দেওয়া হলো যেখানে ট্যাবগুলো একটি অ্যারে থেকে ডাইনামিকভাবে লোড হচ্ছে:
<mat-tab-group>
<mat-tab *ngFor="let tab of tabs" [label]="tab.label" [icon]="tab.icon">
<ng-template mat-tab-label>
<mat-icon>{{ tab.icon }}</mat-icon>
{{ tab.label }}
</ng-template>
<div *ngIf="tab.content">
<p>{{ tab.content }}</p>
</div>
</mat-tab>
</mat-tab-group>
এখানে, আমরা tabs নামক একটি অ্যারে ব্যবহার করছি যেখানে প্রতিটি ট্যাবের জন্য label, icon, এবং content ডাইনামিকভাবে লোড হচ্ছে।
আপনার app.component.ts ফাইলে tabs অ্যারে তৈরি করুন। এখানে প্রতিটি ট্যাবের জন্য একটি অবজেক্ট রয়েছে যা label, icon, এবং content ধারণ করে।
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
tabs = [
{ label: 'Home', icon: 'home', content: 'This is the home tab' },
{ label: 'Profile', icon: 'person', content: 'This is the profile tab' },
{ label: 'Settings', icon: 'settings', content: 'This is the settings tab' }
];
}
এখানে, tabs অ্যারে তিনটি ট্যাবের তথ্য ধারণ করছে। প্রতিটি ট্যাবে একটি লেবেল, একটি আইকন, এবং কন্টেন্ট আছে।
আপনি চাইলে ট্যাবের কন্টেন্টও ডাইনামিকভাবে পরিবর্তন করতে পারেন। যেমন, আপনি API থেকে কন্টেন্ট লোড করতে পারেন:
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
tabs = [];
constructor(private http: HttpClient) {}
ngOnInit() {
// API থেকে ট্যাব ডেটা লোড করা
this.http.get<any[]>('https://api.example.com/tabs').subscribe(data => {
this.tabs = data;
});
}
}
এখানে, ngOnInit() লাইফসাইকেল হুক ব্যবহার করে API থেকে ট্যাব ডেটা লোড করা হচ্ছে এবং tabs অ্যারে আপডেট হচ্ছে।
Angular Material এর MatTab কম্পোনেন্টের সাহায্যে আপনি সহজেই ডাইনামিক ট্যাব তৈরি করতে পারেন। এটি ngFor ডিরেকটিভের মাধ্যমে ডেটা থেকে ট্যাব লোড করতে সক্ষম করে এবং এর মাধ্যমে আপনি অ্যাপ্লিকেশনের UI আরো ইন্টারঅ্যাকটিভ ও ব্যবহারকারী-বান্ধব করতে পারেন। আপনি যখন ট্যাব কন্টেন্ট API বা ডাটাবেস থেকে ডাইনামিকভাবে লোড করেন, তখন এটি অ্যাপ্লিকেশনকে আরো দক্ষ এবং আধুনিক করে তোলে।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
